<template>
    <div class="home-container">
        <el-container>
            <el-aside width="200px" style="background-color: #96C8FF">
                <el-menu :default-openeds="['1', '2','3']">
                    <el-submenu index="1" v-if="u_level>2">
                        <template slot="title">
                            <i class="el-icon-message" style=""></i>师生管理
                        </template>
                        <el-menu-item-group>
                            <template slot="title"><p>⭐️师生管理</p></template>
                            <el-menu-item index="1-1" @click="goStudent">学生列表</el-menu-item>
                            <el-menu-item index="1-2" @click="goTeacher">教师列表</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="2" >
                        <template slot="title"><i class="el-icon-menu"></i>作业管理</template>
                        <el-menu-item-group>
                            <template slot="title"><p>⭐️作业管理</p></template>
                            <el-menu-item index="2-1" @click="goPushJob">提交作业</el-menu-item>
                            <el-menu-item index="2-2" @click="goToJobList" v-if="u_level>1">作业列表</el-menu-item>
                            <el-menu-item index="2-3" v-if="u_level>1" @click="goToCorrect">批改作业</el-menu-item>
                            <el-menu-item index="2-4" v-if="u_level>1" @click="goToPublish">发布作业</el-menu-item>
                            <el-menu-item index="2-5" v-if="u_level>1">优秀作业</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-message" style=""></i>成绩单
                        </template>
                        <el-menu-item-group>
                            <template slot="title"><p>⭐成绩单</p></template>
                            <el-menu-item index="3-1" @click="goJobReport">作业成绩单</el-menu-item>
                            <el-menu-item index="3-2" @click="goExamReport">测试成绩单</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title">
                            <i class="el-icon-setting"></i>在线测试
                        </template>
                        <el-menu-item-group>
                            <template slot="title"><p>⭐️在线测试</p></template>
                            <el-menu-item index="4-1">测试题库</el-menu-item>
                            <el-menu-item index="4-2">测试结果</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header>
                    <avatar :username="u_name" background-color="#3489FF" color="#000000"></avatar>
                    <el-dropdown>
                        <span class="el-dropdown-link">
                            <i class="el-icon-caret-bottom el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="goToUpdateMyInfo">个人空间</el-dropdown-item>
                            <el-dropdown-item @click.native="logout">登出</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <!--<img src="../images/touxiang.jpg" alt="">-->
                    <!--<div style="background-image: url(../images/touxiang.jpg)"></div>-->
                    <!--:style="'background-image:url(require('./../assets/banner_top2.png'))'"-->
                </el-header>
                <el-main>
                    <el-collapse-transition>
                        <router-view></router-view>
                    </el-collapse-transition>
                </el-main>
                <el-footer>Footer</el-footer>
            </el-container>
            <push_job @getValueFromPushJob="getSonValuePushJob" :flag="job_dialog_flag" :tip="'提交作业'"></push_job>
        </el-container>
    </div>
</template>
<script>
    import Avatar from 'vue-avatar'
    import push_job from '../homework/subcomponents/PushJob.vue'
    import store from '../store'
    export default {
        data() {
            return {
                job_dialog_flag: false,
                u_name: "",
                u_level: 1,
            }
        },
        methods: {
            logout(){
                store.state.user = null
                localStorage.setItem('user', JSON.stringify(this.$store.state.user))
                this.$router.push({name: "login"});
            },
            goToJobList(){
                this.$router.push({name: "hwList"});
            },
            goToUpdateMyInfo(){
                this.$router.push({name: "updateMyInfo"});
            },
            goExamReport() {
                this.$router.push({name: "examReport"});
            },
            goJobReport() {
                this.$router.push({name: "jobReport"});
            },
            goStudent() {
                this.$router.push({name: "student"});
            },
            goTeacher(){
                this.$router.push({name: "TchList"});
            },
            goPushJob() {
                this.job_dialog_flag = !this.job_dialog_flag
            },
            getSonValuePushJob(flag) {
                this.job_dialog_flag = flag
            },
            goToPublish(){
                this.$router.push({name: "PublishJob"});
            },
            goToCorrect(){
                this.$router.push({name: "correct"});
            }
        },
        mounted() {
            this.u_name = store.state.user.username
            this.u_level = store.state.user.level
        },
        components: {
            push_job,
            Avatar
        }
    }
</script>

<style lang="scss" scoped>
    .vue-avatar--wrapper {
        margin-top: 3px;
    }

    .el-dropdown {
        display: inline-block;
        position: relative;
        color: #000;
        font-size: 14px;
        height: 20px;
        margin: 39px 50px 1px -15px;
    }

    .el-dropdown-link {
        cursor: pointer;

    }

    .el-icon-arrow-down {
        font-size: 12px;
    }

    .home-container {

        .el-container {
            height: 720px;

            .el-header {
                background-color: #B3C0D1;
                color: #333;
                height: 56px !important;
                display: flex;
                justify-content: flex-end;

            }

            .el-footer {
                background-color: #B3C0D1;
                color: #333;
                text-align: center;
                height: 38px !important;
            }

            .el-aside {
                color: #333;
                text-align: center;

                .el-menu {
                    background-color: #96C8FF;

                    .el-submenu {
                        text-align: left;

                        .el-menu-item-group {
                            p {
                                margin: 0px 0px 0px -16px;
                                padding: 7px 0 7px 0px;
                                line-height: normal;
                                font-size: 12px;
                                color: #909399;
                            }

                            background-color: #bbdaff;

                            .el-menu-item.is-active {
                                padding: 0px 0px 0px 40px !important;
                                color: #F56C6C;
                            }
                        }
                    }
                }
            }
            .el-main {
                background-color: #E9EEF3;
                color: #333;
                padding: 8px 12px 8px 4px;
                /*text-align: center;*/
            }
        }
    }
</style>
